<template>
    <div class="storeTable">
        <div class="">
            <el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><span
                    class="lineTitle">模块-店铺管理表列表</span></el-divider>
        </div>

        <div class="batchOPT">
            <el-button class="addBTN" type="primary" icon="el-icon-circle-plus-outline" @click="addStore">新增
            </el-button>
        </div>
        <div class="addStore">

        </div>
        <div class="selectBox">
            <div class="selectLi">
                <el-select v-model="proName" clearable filterable placeholder="选择省份">
                    <el-option class="select-option"
                               v-for="item in provinces"
                               :key="item.id"
                               :label="item.areaname"
                               :value="item.id"
                               :change="provinceChange">
                    </el-option>
                </el-select>
                <el-button class="selectBtn el-icon-zoom-in" type="primary" @click="provinceGet(1)">查询
                </el-button>
            </div>
            <!--:clearable="true"可清空-->
            <div class="selectLi">
                <el-input
                        class="inline-input"
                        v-model="cityName"
                        :blur="cityChange"
                        :clearable="true"
                        placeholder="输入城市"
                ></el-input>
                <el-button class="selectBtn el-icon-zoom-in" type="primary" @click="cityGet(1)">查询
                </el-button>
            </div>

            <div class="selectType">
                <el-select v-model="payStatus" clearable placeholder="请选择">
                    <el-option
                            v-for="item in PAY_STATUS"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key"
                            :change="payStatusChange">
                    </el-option>
                </el-select>
                <el-button class="selectBtn " type="warning" @click="payStatusGet(1)">支付状态
                </el-button>
            </div>

            <div class="selectType">
                <el-select v-model="storeFrontType" clearable placeholder="请选择">
                    <el-option
                            v-for="item in STORE_FRONT_TYPE"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key"
                            :change="storeFrontTypeChange">
                    </el-option>
                </el-select>
                <el-button class="selectBtn" type="warning" @click="frontGet(1)">门头达标
                </el-button>
            </div>

            <div class="selectType">
                <el-select v-model="storeTypeId" clearable placeholder="请选择">
                    <el-option
                            v-for="item in STORE_TYPE"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key"
                    >
                    </el-option>
                </el-select>

                <el-button class="selectBtn" type="warning" @click="storeTypeGet(1)">门店类型
                </el-button>
            </div>

        </div>

        <div class="exportExcel">
            <!--<a href="#" class="exportA">
                &lt;!&ndash;@click="exportExcel"&ndash;&gt;
                <el-button class="exportBtn el-icon-coin" type="success" >导出表格</el-button>
            </a>-->
            <el-button class="exportBtn el-icon-coin" type="success" @click="exportExcel">导出表格</el-button>
            <el-button class="exportBtn el-icon-coin" @click="importExcel">导入
            </el-button>
        </div>
        <!--:data绑定data中预设的参数
        单行显示:show-overflow-tooltip="true"
        如果为tr，则需要v-for="(store,index) of stores" :key="index"
        -->
        <el-table
                ref="multipleTable"
                tooltip-effect="dark"
                @selection-change="handleSelectionChange"
                :data="stores"
                :show-overflow-tooltip="true"
                border
                style="width: 100%"
                class="previous-row"
                :header-cell-style="{backgroundImage:'linear-gradient(#ff6e02,#ff6d00)',color:'#ffffff',}"
        >

            <el-table-column type="selection" width="35">
            </el-table-column>
            <!--<el-table-column
                    sortable
                    fixed
                    prop="uniId"
                    label="唯一ID"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->
            <el-table-column :show-overflow-tooltip="true"
                             sortable
                             fixed
                             prop="typeId"
                             label="店铺类型"
                             width="110">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.typeId === 0 ? 'default'
                        :scope.row.typeId === 1?'success'
                        :scope.row.typeId === 2?'info':'danger'"
                            id="typeIds" size="mini" disable-transitions>{{STORE_TYPE |
                        optionObjectKV(scope.row.typeId)}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="defName"
                    label="店铺名称"
                    width="90"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <!--<el-table-column
                    sortable
                    fixed
                    prop="fullName"
                    label="门店全称"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->
            <el-table-column
                    sortable
                    fixed
                    prop="manager"
                    label="负责人"
                    width="80"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="province.add"
                    label="省"
                    width="90"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    prop="city.add"
                    label="市"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    prop="district.add"
                    label="区"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <!--<el-table-column
                    sortable
                    fixed
                    prop="managerTel"
                    label="手机号"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <el-table-column
                    sortable
                    prop="payStatus"
                    label="支付状态"
                    width="90"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <el-tag :type="scope.row.payStatus === 'F' ? 'success':'danger'"
                            id="payStatus" size="mini" disable-transitions>{{PAY_STATUS |
                        optionObjectKV(scope.row.payStatus)}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    sortable
                    prop="payFull"
                    label="全款金额"
                    width="90"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <!--<el-table-column
                    sortable
                    fixed
                    prop="payWechatAmount"
                    label="微信支付"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="payAliAmount"
                    label="支付宝支付"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="payBalanceAmount"
                    label="余额支付"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="payBankAmount"
                    label="银行卡支付"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="payCashAmount"
                    label="现金支付"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <el-table-column
                    sortable
                    prop="payDebt"
                    label="欠款"
                    width="70"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    prop="storeStatus"
                    label="店铺状态"
                    width="90"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <el-tag :type="scope.row.storeStatus === 'ARRANGE' ? 'default'
                        :scope.row.storeStatus === 'ON'?'success':'danger'"
                            id="storeStatus" size="mini" disable-transitions>{{STORE_STATUS |
                        optionObjectKV(scope.row.storeStatus)}}
                    </el-tag>
                </template>
            </el-table-column>

            <!--<el-table-column
                    sortable
                    fixed
                    prop="picList"
                    label="缴费凭证"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <!--<el-table-column
                    sortable
                    prop="storeRemark"
                    label="店铺说明"
                    width="90"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <!--<el-table-column
                    sortable
                    fixed
                    prop="storeFront"
                    label="店铺门头"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <el-table-column
                    sortable
                    prop="storeFrontType"
                    label="门头达标"
                    width="90"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <el-tag :type="scope.row.storeFrontType === 'ON'?'success':'danger'"
                            id="storeFrontType" size="mini" disable-transitions>{{STORE_FRONT_TYPE |
                        optionObjectKV(scope.row.storeFrontType)}}
                    </el-tag>
                </template>
            </el-table-column>

            <!--<el-table-column
                    sortable
                    fixed
                    prop="subsidy"
                    label="店铺门头补贴"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="subsidyType"
                    label="补贴状态"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="subsidyRemark"
                    label="补贴说明"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <el-table-column
                    sortable
                    prop="createTime"
                    label="创建时间"
                    width="150"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <!--<el-table-column
                    sortable
                    prop="updateTime"
                    label="更新时间"
                    width="100"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <el-table-column
                    class="optionList"
                    fixed="right"
                    label="操作"
                    width="220">
                <!--使用slot-scope传递当前行参数-->
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="edit(scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="warning"
                            @click="del">排序
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="del(scope.row)">删除
                    </el-button>
                </template>

            </el-table-column>
        </el-table>


        <div class="pageHelper">
            <el-button class="flushBTN" type="primary" @click="pageList(1)">刷新数据</el-button>
            <page-helper ref="pageHelper" :list="pageList"></page-helper>
        </div>

        <div class="uploadExcel">
            <el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" class="dialogDef">
                <div slot="title" class="header-title">
                    <div style="padding:15px 20px;">{{this.dialogTitle}}</div>
                </div>
                <!--绑定校验规则，必须这里:model绑定模块，ref做别名，:rules指定规则-->
                <el-form v-model="uploadStoreExcel" :model="uploadStoreExcel" ref="uploadStoreExcel"  status-icon>
                        <el-upload
                                class="upload-excel"
                                drag
                                :action="importStoreExcel"
                                :headers="token"
                                :before-upload="beforeUpload"
                                :on-success="onUploadSuccess"
                                :multiple="false" >
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text"><span class="uploadSpan">将EXCEL后缀.xlsx的文件拖到此处</span>，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">只能上传xlsx表格文件，且不超过500kb</div>
                        </el-upload>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <!--<el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="uploadExcel">上传</el-button>-->
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import PageHelper from "../../../components/PageHelper";

    export default {
        name: "StoreSet",
        //引用组件
        components: {PageHelper},
        data() {
            return {
                message: '这里是大模块-店铺管理表内容页',
                stores: [],
                store: {},
                STORE_TYPE: STORE_TYPE,
                PAY_STATUS: PAY_STATUS,
                STORE_STATUS: STORE_STATUS,
                STORE_FRONT_TYPE: STORE_FRONT_TYPE,
                SUBSIDY_TYPE: SUBSIDY_TYPE,
                //地区
                address: [],
                areasId: [],
                provinces: [],
                province: {id: '', areaname: ''},
                cities: [],
                city: "",
                cityName: "",
                districts: [],
                district: "",
                proName: "",
                //查询
                payStatus: '',
                storeFrontType: '',
                storeType: "",
                storeTypeId: null,
                //上传excel
                uploadStoreExcel: {},
                labelName:'',
                fileList:'',
                importStoreExcel:process.env.VUE_APP_SERVER + "/business/admin/store/importStoreExcel",
                token:{
                    token:Tool.getEmpLogin().token
                },
                //edit模态框
                dialogFormVisible: false,
                dialogTitle: '',
                disabled: 'disabled',
                labelContent: '',
                formLabelWidth: '120px',
            }
        },
        mounted() {
            //1.普通列表查询
            this.list();
            //自定义赋值分页每页行数
            this.$refs.pageHelper.size = 10;
            //2.分页列表查询，默认初始化执行第一页
            this.pageList(1);
            this.getAddTree();
            //this.getCities();
            if (Tool.isNotEmpty(SessionStorage.get(ADD))) {
                this.address = SessionStorage.get(ADD)
            }

            //this.cities=SessionStorage.get(CITIES) || [];
            for (let i = 0; i < this.address.length; i++) {
                this.province = this.address[i];
                this.provinces.push(this.province);
            }
            this.province = "";
            this.city = "";
            this.cityName = "";

            //取消浏览器a默认样式，生成下载:http://127.0.0.1:8899/business/admin/store/getStoreExcel
            //方式 2
            $(".exportA").on("click", function (event) {
                event.preventDefault();
                //使 a 自带的方法失效，即无法调整到 href 中的 URL
                let token = Tool.getEmpLogin().token;
                axios({
                    method: 'get',
                    url: process.env.VUE_APP_SERVER + "/business/admin/store/getStoreExcel",
                    responseType: 'blob',
                    headers: {
                        token: token
                    }
                })
                    .then((res) => {
                        const link = document.createElement('a')
                        let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
                        /**获取 headers 中的 filename 文件名，后端必须设置response.setHeader("")
                         * 设置请求允许控制headers，并配置filename
                         *  httpServletResponse.setHeader("Access-Control-Expose-Headers","Content-disposition");
                         httpServletResponse.setHeader("Content-disposition","attachment;filename="+ excelName + ".xlsx");
                         * */
                        let temp = res.headers["content-disposition"].split(";")[1].split("filename=")[1];
                        //let temp = res.data;
                        var fileName = decodeURIComponent(temp);
                        link.style.display = 'none'
                        link.href = URL.createObjectURL(blob);
                        link.setAttribute('download', fileName)
                        document.body.appendChild(link)
                        link.click()
                        document.body.removeChild(link)
                    }).catch(error => {
                    console.log(error)
                })
            });
        },
        methods: {
            //多选的方法
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //1.list查询
            list() {
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/admin/store/dtoList')
                    .then((response) => {
                        console.log("模块-店铺管理表列表：", response);
                    })
            },
            //2.查询当前页，需要设置变量传入pageHelper分页插件
            pageList(page) {
                if (Tool.isNotEmpty(this.proName)) {
                    Loadings.show();
                    this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/store/getProvincePage', {
                        provinceName: this.proName,
                        currentPage: page, //向后端发送参数。当前页
                        size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                    }).then((response) => {
                        Loadings.hide();
                        let resp = response.data;
                        this.stores = resp.responseData.listPageData;
                        this.$refs.pageHelper.render(page, resp.responseData.totalSize);
                    })
                } else if (Tool.isNotEmpty(this.cityName)) {
                    Loadings.show();
                    this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/store/getCityPage', {
                        cityName: this.cityName,
                        currentPage: page, //向后端发送参数。当前页
                        size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                    }).then((response) => {
                        Loadings.hide();
                        let resp = response.data;
                        this.stores = resp.responseData.listPageData;
                        this.$refs.pageHelper.render(page, resp.responseData.totalSize);
                    })
                } else if (Tool.isNotEmpty(this.payStatus)) {
                    Loadings.show();
                    this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/store/getPayStatusPage', {
                        payStatus: this.payStatus,
                        currentPage: page, //向后端发送参数。当前页
                        size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                    }).then((response) => {
                        Loadings.hide();
                        let resp = response.data;
                        this.stores = resp.responseData.listPageData;
                        this.$refs.pageHelper.render(page, resp.responseData.totalSize);
                    })
                } else if (Tool.isNotEmpty(this.storeFrontType)) {
                    Loadings.show();
                    this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/store/getStoreFrontTypePage', {
                        storeFrontType: this.storeFrontType,
                        currentPage: page, //向后端发送参数。当前页
                        size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                    }).then((response) => {
                        Loadings.hide();
                        let resp = response.data;
                        this.stores = resp.responseData.listPageData;
                        this.$refs.pageHelper.render(page, resp.responseData.totalSize);
                    })
                } else if (this.storeTypeId >= 0 && !Tool.isEmpty(this.storeTypeId)) {
                    Loadings.show();
                    this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/store/getStoreTypePage', {
                        storeType: this.storeTypeId,
                        currentPage: page, //向后端发送参数。当前页
                        size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                    }).then((response) => {
                        Loadings.hide();
                        let resp = response.data;
                        this.stores = resp.responseData.listPageData;
                        this.$refs.pageHelper.render(page, resp.responseData.totalSize);
                    })
                } else {
                    Loadings.show();
                    this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/store/pageList', {
                        currentPage: page, //向后端发送参数。当前页
                        size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                    }).then((response) => {
                        Loadings.hide();
                        let resp = response.data;
                        this.stores = resp.responseData.listPageData;
                        this.$refs.pageHelper.render(page, resp.responseData.totalSize);
                    })
                }

            },
            //3.新增store
            addStore() {
                //可以在这里清空store:this.stores=null;
                let address = SessionStorage.get(ADD);
                this.$router.push({
                    name: "business/store/add",
                    params: {address}
                });
            },
            //4.修改
            edit(store) {
                /*jquery继承对象： $.extend({新对象},旧对象)
                避免vue数据绑定漏洞，更改数据时，随之更改显示的data，但实际没有进行真实保存数据库
                 */
                let add = [];
                if(Tool.isNotEmpty(store.province)){
                    add.push(store.province.id);
                }
                if(Tool.isNotEmpty(store.city)){
                    add.push(store.city.id);
                }
                if(Tool.isNotEmpty(store.district)){
                    add.push(store.district.id);
                }

                this.store = $.extend({}, store);
                this.$router.push({
                    name: "business/store/add",
                    params: {store, add}
                });
            },
            del(store) {
                /**
                 * 前端=》路径内携带参数使用url：'../'+{param}
                 * 后端=》requestMapping('../{param}')
                 *       void ...(@PathVariable String {param})
                 *
                 * ***引用toast的showConfirm全局方法，需要定义局部变量_this
                 * ***并且将存入的store转化为局部对象，才能获取到uniId
                 */
                let _this = this;
                let storeParam = store;
                toast.showConfirm(store.name, function () {
                        _this.$axios.delete(process.env.VUE_APP_SERVER + '/business/admin/store/del/' + storeParam.uniId)
                            .then((response) => {

                                let resp = response.data;
                                if (resp.success) {
                                    _this.pageList(1);
                                }
                            })

                    }
                )
            },
            //更新显示show
            updateShow(row) {
                this.store = row;
                let responseMsg = '';
                //前端校验
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/store/save', this.store)
                    .then((response) => {
                        let resp = response.data;
                        responseMsg = response;

                        if (resp.success) {
                            this.pageList(1);
                            //引入全局变量toast提示
                            toast.success("保存成功", "bottom-end");
                        } else {
                            this.$notify({
                                title: '修改失败，请联系管理员!',
                                message: resp.responseMsg,
                                position: "top-right",
                                type: 'warning'
                            });
                        }
                    });
            },
            getAddTree() {
                Loadings.show();
                if (Tool.isEmpty(SessionStorage.get(ADD))) {
                    let responseMsg = "";
                    this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/address/tree')
                        .then((response) => {
                            Loadings.hide();
                            let resp = response.data;
                            responseMsg = resp;
                            if (resp.success) {
                                //需要过滤tree，否则会生成第四列空数据
                                this.address = Tool.filterTree(resp.responseData);
                                SessionStorage.set(ADD, this.address);
                            } else {
                                this.$notify({
                                    title: '修改失败，请联系管理员!',
                                    message: responseMsg,
                                    position: "top-right",
                                    type: 'warning'
                                });
                            }
                        });
                }

            },
            getCities() {
                if (Tool.isEmpty(SessionStorage.get(CITIES))) {
                    let responseMsg = "";
                    this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/address/getCities')
                        .then((response) => {
                            let resp = response.data;
                            responseMsg = resp;
                            if (resp.success) {
                                //需要过滤tree，否则会生成第四列空数据
                                this.cities = resp.responseList;
                                SessionStorage.set(CITIES, this.cities);
                            } else {
                                this.$notify({
                                    title: '修改失败，请联系管理员!',
                                    message: responseMsg,
                                    position: "top-right",
                                    type: 'warning'
                                });
                            }
                        });
                }
            },
            provinceChange(province) {
                let pro = "";
                for (let i = 0; i < this.provinces.length; i++) {
                    if (province === this.provinces[i].id) {
                        pro = this.provinces[i];
                    }
                }
                this.proName = pro.areaname;

            },
            provinceGet(page) {
                this.pageList(page, this.proName);
                Loadings.show();
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/store/pageList', {
                    provinceName: this.proName,
                    currentPage: page, //向后端发送参数。当前页
                    size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                }).then((response) => {
                    Loadings.hide();
                    let resp = response.data;
                    this.stores = resp.responseData.listPageData;
                    this.$refs.pageHelper.render(page, resp.responseData.totalSize);

                })
            },

            cityChange() {
                console.log("city: ", this.city);

            },
            cityGet(page) {
                Loadings.show();
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/store/pageList', {
                    cityName: this.cityName,
                    currentPage: page, //向后端发送参数。当前页
                    size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                }).then((response) => {
                    Loadings.hide();
                    let resp = response.data;
                    this.stores = resp.responseData.listPageData;
                    this.$refs.pageHelper.render(page, resp.responseData.totalSize);

                })
            },
            payStatusChange() {
                console.log("payStatus：", this.payStatus);
            },
            payStatusGet(page) {
                Loadings.show();
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/store/pageList', {
                    payStatus: this.payStatus,
                    currentPage: page, //向后端发送参数。当前页
                    size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                }).then((response) => {
                    Loadings.hide();
                    let resp = response.data;
                    this.stores = resp.responseData.listPageData;
                    this.$refs.pageHelper.render(page, resp.responseData.totalSize);

                })
            },
            storeFrontTypeChange() {
                console.log("storeFrontType：", this.storeFrontType);
            },
            frontGet(page) {
                Loadings.show();
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/store/pageList', {
                    storeFrontType: this.storeFrontType,
                    currentPage: page, //向后端发送参数。当前页
                    size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                }).then((response) => {
                    Loadings.hide();
                    let resp = response.data;
                    this.stores = resp.responseData.listPageData;
                    this.$refs.pageHelper.render(page, resp.responseData.totalSize);

                })
            },

            storeTypeGet(page) {
                if (Tool.isEmpty(this.storeType)) {
                    let h = this.$createElement;
                    this.$notify({
                        type: 'warning',
                        title: '查询门店类型为空',
                        message: h('i', {style: 'color: teal'}, '请选择门店类型后进行查询操作'),
                        position: 'top-right',
                        offset: 70
                    });
                } else {
                    Loadings.show();
                    this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/store/pageList', {
                        storeType: this.storeTypeId,
                        currentPage: page, //向后端发送参数。当前页
                        size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                    }).then((response) => {
                        Loadings.hide();
                        let resp = response.data;
                        this.stores = resp.responseData.listPageData;
                        this.$refs.pageHelper.render(page, resp.responseData.totalSize);

                    })
                }

            },
            //导入
            importExcel() {
                this.dialogFormVisible = true;
                this.dialogTitle = "导入门店数据";
                this.labelName = "上传文件";
            },
            beforeUpload(uploadStoreExcel){
                let h=this.$createElement;
                let responseMsg="请上传后缀名为.xlsx文件！！！";
                let FileExt = uploadStoreExcel.name.replace(/.+\./, "");
                if (['xlsx'].indexOf(FileExt.toLowerCase()) === -1){
                    this.$notify({
                        title: '上传失败，文件名必须为EXCEL表格后缀.xlsx!',
                        message: h('i', { style: 'color: teal'}, responseMsg),
                        position: "top-right",
                        offset:100,
                        type: 'warning'
                    });
                    return false;
                }
            },
            onUploadSuccess(){
                let responseMsg="亚盟门店数据上传成功！更新数据成功";
                this.dialogFormVisible =false;
                this.$notify({
                    title: '上传成功，更新门店数据ING!',
                    message: responseMsg,
                    position: "bottom-right",
                    offset:100,
                    type: 'success'
                });
                this.pageList(1);
            },
            uploadExcel(){
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/store/importStoreExcel')
                    .then((response) => {
                        let resp = response.data;
                        responseMsg = resp;
                        if (resp.success) {
                            console.log("上传excel成功");

                        } else {
                            this.$notify({
                                title: '修改失败，请联系管理员!',
                                message: responseMsg,
                                position: "bottom-right",
                                offset:100,
                                type: 'warning'
                            });
                        }
                    });
            },
            /**导出
             * //导出文件发送response响应header："Content-disposition","attachment;filename="+ excelName + ".xlsx"
             * 不可使用$axios
             * */
            exportExcel() {
                /*window.location.href="http://127.0.0.1:8899/business/admin/store/getStoreExcel";*/
                let token = Tool.getEmpLogin().token;
                axios({
                    method: 'get',
                    url: process.env.VUE_APP_SERVER + "/business/admin/store/getStoreExcel",
                    responseType: 'blob',
                    headers: {
                        token: token
                    }
                })
                    .then((res) => {
                        const link = document.createElement('a')
                        let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
                        /**获取 headers 中的 filename 文件名，后端必须设置response.setHeader("")
                         * 设置请求允许控制headers，并配置filename
                         *  httpServletResponse.setHeader("Access-Control-Expose-Headers","Content-disposition");
                         httpServletResponse.setHeader("Content-disposition","attachment;filename="+ excelName + ".xlsx");
                         * */
                        let temp = res.headers["content-disposition"].split(";")[1].split("filename=")[1];
                        //let temp = res.data;
                        let fileName = decodeURIComponent(temp);
                        link.style.display = 'none'
                        link.href = URL.createObjectURL(blob);
                        link.setAttribute('download', fileName)
                        document.body.appendChild(link)
                        link.click()
                        document.body.removeChild(link)
                    }).catch(error => {
                    console.log(error)
                })

            },
        }
    }
</script>

<style scoped>
    /*顶部line样式*/
    .topLine {
        background-color: #2a92ee;
    }

    .lineIcon {
        font-size: 22px;
        color: #2a92ee;
        position: relative;
    }

    .lineTitle {
        position: relative;
        font-size: 16px;
        color: #2a92ee;
    }

    /*table样式*/
    .previous-row {
        background: #f0f9eb;
        margin-left: 2%;
        max-width: 96%;

    }

    .optionList {
        text-align: center;
    }

    /deep/ .el-table td, .el-table th {
        padding: 5px 0;
        text-align: center;
    }

    /deep/ .el-table .cell {
        padding-right: 2px;
        line-height: 20px;
        text-align: center;

    }

    /deep/ .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
        padding-left: 5px;
    }

    /*批量操作*/
    .batchOPT {
        float: left;
        margin-left: 2%;
        margin-bottom: 1%;
        z-index: 1;
    }

    /*新增*/
    .addStore {
        float: left;
        margin-left: 5px;
    }

    .addBTN {
        font-size: 16px;
        padding: 11px 20px;
        border: 1px solid white;
        box-shadow: 1px 2px 2px #409eff;
        margin-top: 0;
        float: left;
    }

    .batchBTN {
        background-color: #ff5202;
        color: white;
        box-shadow: 1px 2px 2px #ff6e02;
    }

    .batchBTN:hover {
        background-color: #ff3d02;
        color: white;
    }

    .batchBTN:focus {
        background-color: #ff3d02;
        color: #ffffff;
    }

    /**分页位置/
     */
    .pageHelper {
        margin-left: 60px;
    }

    .flushBTN {
        position: relative;
        float: left;
        max-width: 95px;
        margin-right: 20px;
        margin-top: 5px;
    }

    /*顶部查询*/
    .selectBox {
        margin-left: 150px;
        margin-top: 25px;
    }

    .selectBox .selectLi {
        float: left;

    }

    /deep/ .selectBox .selectLi .el-input {
        max-width: 170px;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .selectBox .selectLi .select-option {

    }

    .selectBox .selectLi .el-button {
        margin-right: 5px;
        padding: 12px 15px;
    }

    .selectBox .selectType {
        float: left;
    }

    /deep/ .selectBox .selectType .el-input {
        max-width: 150px;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .selectBox .selectType .el-button {
        margin-right: 5px;
        padding: 12px 15px;
    }

    .exportExcel {
        display: inline-block;
        float: left;
        margin-right: 2%;
        margin-bottom: 5px;
        margin-left: 30px;
    }

    /deep/ .exportExcel .el-button {
        padding: 12px 15px;

    }

    /*模态框*/
    .header-title {
        background: #2589e7;
        color: white;
        font-size: 20px;
    }
    /*限制模态框高度*/
    /*.dialogDef{
        height: 100%;
    }*/

    /deep/ .el-dialog__header {
        padding: 0;
    }

    /deep/ .el-dialog--center .el-dialog__body {
        background: #d2d3d04d;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
        color: white;
        font-size: 24px;
    }

    /deep/ .el-form-item__label {
        text-align: center;
        padding: 0;
    }

    /deep/ .el-dialog__body {
        padding: 20px 10px;
    }

    /deep/ .el-form-item {
        margin-bottom: 5px;
    }

    .inputWidth{
        max-width:500px;
        float: left;
    }
    /deep/ .inputWidth span{
        margin-left: -20px;
    }
    /deep/ .inputWidth .el-input-number__increase{
        margin-right: 22px;
        right: 0;
    }
    /*提示框的字符颜色*/
    /deep/ .el-form-item__error {
        float: left;
        position: relative;
        line-height: 30px;
        margin-left: 10px;
    }
    /deep/ .el-input__prefix, .el-input__suffix {
        color: #44cd3f;
        font-size: 18px;
    }

    /deep/ .el-input__icon {
        color: #44cd3f;
        font-size: 18px;
    }
    /*拖拽文件隐藏input*/
    /deep/ input[type=file]{
        display: none;
    }
    /deep/ .el-upload{
        display: block;
        text-align: center;
    }
    .upload-excel .el-upload__text .uploadSpan{
        color: #21a01c;
    }
    .upload-excel .el-upload__tip{
        font-size: 16px;
        color: #2a92ee;
    }
    /deep/ .el-upload-dragger{
        width: 90%;
        height: 200px;
        margin: 0 auto;
    }
</style>